解决设置了body宽高,但设置背景颜色仍然会铺满问题

您所在的位置:网站首页 在中设置背景颜色 解决设置了body宽高,但设置背景颜色仍然会铺满问题

解决设置了body宽高,但设置背景颜色仍然会铺满问题

2024-07-11 21:06| 来源: 网络整理| 查看: 265

近期开发遇到一个问题,明明给body设置了宽高,然后给body设置背景,背景仍然会铺满整个屏幕。以下是我的代码:

body{ width: 200px; height:200px; margin: 0 auto; background: green; } 代码看出,我给body设置了宽高并设置居中,然后设置颜色为green,结果却是这样的:

可以看到,绿色的背景铺满了整个浏览器。

经过查询资料,出现以上的原因主要是因为:

当html不设置背景时,body的背景将作为整个浏览器的背景色,而不是body标签自己的背景色。当设置html背景色后,body的背景色就变成了body自己的背景色,此时html的背景色将被浏览器获取成为浏览器的背景色。

所以,要让body的背景色渲染范围只在设置的body范围之内,我们需要对html进行背景样式的设置,这里我们给html设置一个#fff白色的背景色,代码如下:

html{ background: #fff; } body{ width: 200px; height:200px; margin: 0 auto; background: green; } 得到的效果如下:

到这里就解决了设置了body宽高,但设置背景颜色仍然会铺满的问题。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3